<template>
  <div class="image-option-panel">
    <el-tabs v-model="activeTab" class="config-tabs">
      <el-tab-pane label="基础配置" name="basic">
        <div class="config-section">
          <el-form label-position="top">
			<ImgField :baseUrl="BASE_API" 
			:identifier="'src'" 
			label="默认" 
			:value="localConfig.src" 
			@onchange="onchange"  />
			
			<ImgField :baseUrl="BASE_API"
			:identifier="'hover'" 
			label="悬停" 
			:value="localConfig.hover" 
			@onchange="onchange"  />
			
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="样式配置" name="style">
        <div class="config-section">
          <el-form label-position="top">
            <el-row :gutter="8" style="margin-bottom: 12px;">
              <el-col :span="12">
                <el-form-item label="圆角">
                  <el-input-number v-model="localConfig.radius" :min="0" :max="90000" @change="val => updateField('radius', val)" controls-position="right"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="透明度">
                  <el-input-number v-model="localConfig.alpha" :step="0.1" :min="0" :max="1" @change="val => updateField('alpha', val)" controls-position="right"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="填充模式">
              <el-select v-model="localConfig.objectFit" @change="val => updateField('objectFit', val)" placeholder="选择图片填充模式">
                <el-option label="填充（cover）" value="cover" />
                <el-option label="包含（contain）" value="contain" />
                <el-option label="拉伸（fill）" value="fill" />
                <el-option label="原尺寸（none）" value="none" />
                <el-option label="缩放（scale-down）" value="scale-down" />
              </el-select>
            </el-form-item>
			
			<el-form-item label="阴影效果">
			  <el-input v-model="localConfig.boxShadow" @change="val => updateField('boxShadow', val)" placeholder="0 4px 8px rgba(0,0,0,0.1)"/>
			</el-form-item>
			
			<el-form-item label="变换">
			  <el-input v-model="localConfig.transform" @change="val => updateField('transform', val)" placeholder="rotateY(180deg)"/>
			</el-form-item>
			
          </el-form>
        </div>
      </el-tab-pane>
	  
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { axiosInstance } from '@/utils/http/index'
const BASE_API = axiosInstance.defaults.baseURL
interface Props {
  src?: string
  hover?: string
  width?: number
  height?: number
  radius?: number
  alpha?:number
  preview?: boolean
  fallback?: string
  objectFit?: string
  boxShadow?:string
  transform?:string
  css?:string
  [key: string]: any
}

const props = defineProps<Props>()
const emit = defineEmits(['config-change'])

const activeTab = ref('basic')

const localConfig = reactive<Record<string, any>>({
  src: props.src || '',
  hover: props.hover || '',
  width: typeof props.width === 'number' ? props.width : 200,
  height: typeof props.height === 'number' ? props.height : 120,
  radius: typeof props.radius === 'number' ? props.radius : 0,
  alpha: typeof props.alpha === 'number' ? props.alpha : 1,
  preview: typeof props.preview === 'boolean' ? props.preview : true,
  fallback: props.fallback || '',
  objectFit: typeof props.objectFit === 'string' ? props.objectFit : 'cover',
  boxShadow: typeof props.boxShadow === 'string' ? props.boxShadow : '',
  transform: typeof props.transform === 'string' ? props.transform : '',
  css: typeof props.css === 'string' ? props.css : ''
})

function updateField(key: string, value: any) {
  localConfig[key] = value
  emit('config-change', { key, value })
}

function beforeUpload(file: File) {
  const isImage = file.type.startsWith('image/')
  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  return true
}

function handleUpload(file: any) {
  const reader = new FileReader()
  reader.onload = (e) => {
    localConfig.src = e.target?.result as string
    updateField('src', localConfig.src)
  }
  reader.readAsDataURL(file.raw)
}

// 监听 props 字段变化，自动同步本地表单
watch(
  () => ({ ...props }),
  (newProps) => {
    localConfig.src = newProps.src || ''
	localConfig.hover = newProps.hover || ''
    localConfig.width = typeof newProps.width === 'number' ? newProps.width : 200
    localConfig.height = typeof newProps.height === 'number' ? newProps.height : 120
    localConfig.radius = typeof newProps.radius === 'number' ? newProps.radius : 0
    localConfig.alpha = typeof newProps.alpha === 'number' ? newProps.alpha : 1
    localConfig.preview = typeof newProps.preview === 'boolean' ? newProps.preview : true
    localConfig.fallback = newProps.fallback || ''
    localConfig.objectFit = typeof newProps.objectFit === 'string' ? newProps.objectFit : 'cover'
    localConfig.css = typeof newProps.css === 'string' ? newProps.css : ''
	localConfig.boxShadow = typeof newProps.boxShadow === 'string' ? newProps.boxShadow : ''
	localConfig.transform = typeof newProps.transform === 'string' ? newProps.transform : ''
  },
  { immediate: true, deep: true }
)

const onchange = (input: { pidentifier: string, identifier: string, value: any }) => {
	updateField(input.identifier, input.value)
}


</script>

<style scoped>
.image-option-panel {
  width: 100%;
  height: 100%;
  background: var(--art-main-bg-color);
}
.config-tabs {
  height: 100%;
}
.config-section {
  padding: 16px 0;
}

.custom-tool-bar{
    height: 35px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 5px;
    border-left: 2px solid #5d87ff;
    background: #5d87ff21;
}
.custom-binding-list{

    .custom-binding-row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        background: rgba(0, 0, 0, 0.05);
        padding-left: 8px;
        margin-bottom: 5px;
    }
}



</style>
